<script setup lang="ts">
import { next } from "@/util";
import { ref } from "vue";
const
  props = defineProps({
    modelValue: { type: Uint8Array, default: new Uint8Array(20), },
    disabled: { type: Boolean, default: false, },
  }),
  permission = ref(pd),
  ks = ref<obj>({}),
  show = ref(false);
function change(i: number, v: number, k: string, d: number) {
  if (d) {
    props.modelValue[i] |= v;
  } else {
    props.modelValue[i] &= ~v;
  }
  next(() => { ks.value[k] ^= 1; });
}

(function () {
  const t: obj = {};
  Object.keys(pd).forEach(k => { t[k] = 0; });
  ks.value = t;
  show.value = true;
})()

</script>
<template>
  <el-form class="whf permission" v-if="show">
    <div class="content xw jc whf">
      <el-form-item v-for="(a, k) in permission" :key="ks[k]" :label="k">
        <el-switch :modelValue="!!(modelValue[a.i] & a.v)" @change="change(a.i, a.v, k, $event)" :disabled="disabled" />
      </el-form-item>
    </div>
  </el-form>
</template>
<style lang="scss" scoped>
.permission {
  position: relative;
  max-height: 20em;
  overflow: auto;
  >.content {
    min-width: 52em;
    >.el-form-item {
      min-width: 13em;
      width: 25%;
      :deep(>label) {
        overflow: hidden;
        width: 9em;
      }
    }
  }
}
</style>